// pages/bloodsugarhome/bloodsugarhome.js
import * as echarts from '../../ec-canvas/echarts';

var app = getApp();

// var 声明是全局作用域或函数作用域，而 let 和 const 是块作用域。 var 变量可以在其范围内更新和重新声明； let 变量可以被更新但不能重新声明； const 变量既不能更新也不能重新声明。

function goTimeTrans(date) {
    var date = new Date(date * 1000); //如果date为13位不需要乘1000
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
    return Y + M + D + h + m + s;
}
let processedBgs = []
let avg_bg = "0.0"
let percentage_ = "0"
// 将获得到的bg数据放到js的各项数据上
function sortBy(field) {
    //根据传过来的字段进行排序
    return (x, y) => {
        return x[field] - y[field]
    }
}

function bgsToJSData(bgs, append = false) {
    if (!append)
        showdata = [];
    processedBgs = [];
    var currentTime = parseInt(new Date().getTime() / 1000);
    // var avgbg = 0;
    // var len = 0;
    // console.log("rawBgs:",bgs);
    // 按时间排序
    if (bgs && bgs.length > 0) {
        bgs.sort(sortBy('time'));
        bgs = bgs.filter(item => item.time <= currentTime);
    } else {
        console.log('bgs 是 null 或空数组');
    }
    // console.log("sortedBgs:",bgs);
    // for (let i in bgs) {
    //     len += 1;
    //     var tmpbg = bgs[i];
    //     tmpbg.time = goTimeTrans(tmpbg.time);
    //     processedBgs.push(tmpbg);
    //     avgbg += bgs[i].value;
    // }
    // if (len == 0) {
    //     avgbg = 0;
    // } else {
    //     avgbg = avgbg / len;
    // }

    // // 保留一位小数
    // avg_bg = avgbg.toFixed(1).toString();
    // // 至此今日平均血糖值数据更新完毕
    // percentage_ = Math.round(avg_bg / 20 * 100);


    // 折线图数据更新完毕
    for (let i in bgs) {
        var tmpbg = bgs[i];
        tmpbg.time = goTimeTrans(tmpbg.time);
        processedBgs.push(tmpbg);
    }
    for (let i in processedBgs) {
        var tmpval = new Object();
        tmpval.value = [];
        tmpval.value.push(processedBgs[i].time);
        tmpval.value.push(processedBgs[i].value);
        showdata.push(tmpval);

    }

}

function jsTimeTrans(d) {
    return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
}
let showdata = [

]

function time_label_formatter(value, index) {
    let remainder = index % 2;
    if (index == 0) {
        remainder = 0;
    }
    if (remainder == 0) {
        return "{HH}:{mm}";
    } else {
        return "";
    }
}
let chart;
let option = {
    grid: {
        containLabel: true
    },
    tooltip: {
        show: true,
        axisPointer: {
            type: 'cross'
        }
    },

    dataZoom: [{
        type: 'inside',
        xAxisIndex: 0,
        start: 0, //数据窗口范围的起始百分比0-100
        end: 100, //数据窗口范围的结束百分比0-100
        filterMode: 'empty',
        zoomOnMouseWheel: true,
        moveOnMouseWheel: false
    }],
    xAxis: {
        type: 'time',
        boundaryGap: false, // 距离坐标原点是否有间隙
        min: jsTimeTrans(new Date(new Date().setHours(0, 0, 0, 0))),
        max: jsTimeTrans(new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1)),
        // interval: 3*14400000,
        interval: 3600,
        axisLabel: { //  如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
            // minInterval: 14400000, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理） 不行感觉没用
            // maxInterval: 14400000,
            formatter: time_label_formatter,
            rotate: 40 // 横坐标上label的倾斜度
        }

    },
    yAxis: {
        type: 'value',
        name: 'mmol/L',
        min: 0,
        max: 20,
        interval: 5,
        axisLabel: {
            formatter: '{value}'
        },
        axisPointer: {
            snap: true
        }
        // show: false
    },
    series: [{
        type: 'line',
        smooth: true,
        data: showdata,
    }]
}

function initChart(canvas, width, height, dpr) {
    chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
    });
    option.series[0].data = showdata;
    canvas.setChart(chart);
    chart.setOption(option);
    return chart;
}


Page({
    data: {
        avg_sugar: "__.__",
        cur: {},
        curTime: "今日平均血糖",
        visible: false,
        config: {
            canvasSize: {
                width: 400,
                height: 400
            },
            percent: 80,
            barStyle: [{
                width: 20,
                fillStyle: '#f0f0f0'
            }, {
                width: 20,
                fillStyle: [{
                    position: 0,
                    color: '#56B37F'
                }, {
                    position: 1,
                    color: '#c0e674'
                }]
            }],
            needDot: true,
            dotStyle: [{
                r: 20,
                fillStyle: '#FCFCFC',
                shadow: 'rgba(0,0,0,.15)'
            }, {
                r: 10,
                fillStyle: '#56B37F'
            }]
            // dotStyle: [{r: 24, fillStyle: '#ffffff'}, {r: 10, fillStyle: '#56B37F'}]
        },
        percentage: 0,
        ec: {
            onInit: initChart
        },

    },
    goDetail() {
        wx.navigateTo({
            url: '/pages/bloodsugar/bloodsugar',
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        wx.request({ // 调用接口
            url: `${app.globalData.protocol}://${app.globalData.host}/bgmp/api/user?Action=ListBgs`,
            // url: 'https://124.220.110.138:443/bgmp/api/user?Action=ListBgs',
            method: 'POST',
            header: {
                "Content-Type": "application/json",
                "x-api-key": wx.getStorageSync('token')
            },
            data: {
                "start": Date.parse(new Date(new Date().setHours(0, 0, 0, 0))) / 1000,
                "end": Date.parse(new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1)) / 1000
            },
            success: (res) => { // 接口调用成功，获取token并缓存
                // console.log(res);
                if (res.statusCode == 200) {

                    bgsToJSData(res.data.message.bgs);
                    this.setData({
                        avg_sugar: avg_bg
                    });
                    this.setData({
                        percentage: percentage_,
                    });
                    // option.series[0].data = showdata;
                    // if (chart) {
                    // console.log("yes");
                    // chart.setOption(option); // 得重新设置Option才会生效
                    // }
                    // console.log("ec:", this.data.ec);
                } else {

                }
            },
            fail() {
                console.log("登录出现错误！");
            }
        })
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})